<template>
  <div class="login">
    <van-card
      v-for="(item, index) in cartList"
      :key="item.id"
      :num="item.number"
      :price="item.price"
      :desc="item.specifications[0]"
      :title="item.goodsName"
      :thumb="item.picUrl"
    >
      <template #tags>
        <van-tag plain type="danger">{{ item.updateTime }}</van-tag>
      </template>
      <template #footer>
        <van-button size="mini" @click="abbr(index)">加+</van-button>
        <van-button size="mini" @click="add(index)">减-</van-button>
        <van-button size="mini" @click="remo(index)">删除</van-button>
      </template>
    </van-card>
    <van-submit-bar
      :price="totalPrice * 100"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox v-model="checked">全选</van-checkbox>
      <template #tip>
        你的收货地址不支持同城送,
        <span @click="onClickEditAddress">修改地址</span>
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import request from '../../utils/request'
export default {
  name: 'login',
  components: {},
  data () {
    return {
      checked: true,
      // 商品
      cartList: '',
      // 总价
      cartTotal: '',
      // 商品总价
      totalPrice: 0,
      // 总数量
      numberData: 0
    }
  },
  // 计算属性
  computed: {
    computedTotalPrice () {
      let totalPrice = 0
      if (this.cartList && this.cartList.length > 0) {
        totalPrice = this.cartList.reduce(
          (total, item) => total + item.price * item.number,
          0
        )
      }
      return totalPrice
    }
  },
  watch: {},
  mounted () {
    this.res()
  },
  methods: {
    res () {
      request('cart/index').then((res) => {
        const { data } = res.data
        this.cartList = data.cartList
        this.cartTotal = data.cartTotal
        // console.log(this.cartList)
        // console.log(data.cartTotal.goodsAmount)
        this.totalPrice = this.computedTotalPrice
      })
    },
    onSubmit () {
      console.log('提交订单')
    },
    onClickEditAddress () {
      console.log('修改地址')
    },
    add (index) {
      request
        .post('cart/update', {
          number: this.cartList[index].number - 1,
          goodsId: this.cartList[index].goodsId,
          id: this.cartList[index].id,
          productId: this.cartList[index].productId
        })
        .then((res) => {
          // console.log(res)
        })
    },
    abbr (index) {
      request
        .post('cart/update', {
          number: this.cartList[index].number + 1,
          goodsId: this.cartList[index].goodsId,
          id: this.cartList[index].id,
          productId: this.cartList[index].productId
        })
        .then((res) => {
          // console.log(res)
        })
    },
    remo (index) {
      request
        .post('cart/delete', { productIds: [this.cartList[index].productId] })
        .then((res) => {
          // console.log(res)
          // console.log(this.cartList[1].productId)
        })
      // console.log(index)
      this.cartList.splice(index, 1)
      this.totalPrice = this.computedTotalPrice
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  .van-submit-bar {
    bottom: 45px;
  }
}
.goods-card {
  margin: 0;
  background-color: white;
}
.delete-button {
  height: 100%;
}
</style>
